<template>
    <Layout>
        <Form ref="form1" :model="form1" :label-width="120">
            <Row class="query-form">
                <Col span="8">
                    <FormItem label="姓名:">
                        <Input type="text" v-model="form1.userName"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="登录账号:">
                        <Input type="text" v-model="form1.loginId" style="width: 100%"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="所属单位:">
                        <Input type="text" v-model="form1.companyName"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="所属部门:">
                        <Input type="text" v-model="form1.orgName" style="width: 100%"></Input>
                    </FormItem>
                </Col>
                <Col span="8">
                </Col>
                <Col span="8">
                    <Button icon="md-search" type="error" style="margin-left: 10px" @click="query">查询</Button>
                    <Button @click="reset">重置</Button>
                    <Button type="error" @click="add">新增</Button>
                </Col>
            </Row>
        </Form>

        <Table class="table" no-data-text="没有查询到相关数据!" size="small" :loading="userInRoleLoading"
               highlight-row stripe border :columns="columns1" width="100%" height="450" :data="listData">
        </Table>
        <Page  :total="pagedata.total" :page-size="pagedata.pageSize" :current="pagedata.currentPage" @on-change="pagechange" :page-size-opts="pageSizeArray"
               @on-page-size-change="pageSizeChange" show-total show-sizer show-elevator />
        
        <UserForSelect ref="userForSelect" @closeModel="closeModel" @getSelectData="getSelectData" :userForSelectModal="userForSelectModal" :roleId="roleId" 
            :companyName="companyName" :totalNum1="totalNum1" :datas="notInListData">
            </UserForSelect>

    </layout>
</template>

<script>
    import {Api} from '../../../api/index.js'
    import UserForSelect from './userForSelect.vue'

    export default {
        props: ['listData','roleId','companyName','totalNum','userInRoleLoading'],
        components: {
            UserForSelect
        },
        watch:{
            "totalNum": {
                handler: function (val, oldVal) {
                    this.pagedata.total = val;
                }
            }
        },
        data() {
            return {
                totalNum1 : 0,
                notInListData : [],
                userForSelectModal : false,
                form1:{
                    userName: ''
                },
                //分页参数
                pageSizeArray: [10, 20, 50],
                pagedata: {
                    total: this.totalNum,
                    pageSize: 10,
                    currentPage: 1,
                },
                columns1: [{
                    // type: 'index',
                    title: '编号',
                    width: 70,
                    align: 'center',
                    fixed: 'left',
                    render: (h, params) => {
                        return h('span', params.index + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
                    }
                },
                    {
                        title: '姓名',
                        minWidth: 100,
                        align: 'center',
                        key: 'userName'
                    },
                    {
                        title: '登录账号',
                        minWidth: 100,
                        align: 'center',
                        key: 'loginId'
                    },
                    {
                        title: '所属单位',
                        minWidth: 250,
                        align: 'center',
                        key: 'companyName'
                    },
                    {
                        title: '所属部门',
                        minWidth: 250,
                        align: 'center',
                        key: 'orgName'
                    },
                    {
                        title: '所属岗位',
                        minWidth: 250,
                        align: 'center',
                        render: (h, params) => {
                            return h("span",  params.row.position == null?"":params.row.position.positionName);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        minWidth: 90,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color:'red'
                                    },
                                    on: {
                                        click: () => {
                                            this.$Modal.confirm({
                                                title: '提示信息',
                                                content: '<p>删除该用户</p>',
                                                okText:'确认',
                                                cancelText:'取消',
                                                onOk: () => {
                                                    this.delete(params.row);
                                                }});
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }],
                dataTable: []
            }
        },
        mounted: function() {
        },
        methods: {
            closeModel() {
                this.userForSelectModal = false;
            },
            add(){
                this.userForSelectModal = true;
                this.$refs.userForSelect.query();
            },
            delete(row){
                this.$http.get(Api.deleteRoleUser + '/' + this.roleId, {params:{users : row.userId}}).then(res => {
                    this.query();
                    this.$Message.success('成功!');
                    //this.handleReset()
                }).catch(e => {
                    this.$Message.error('请求失败');
                })
            },
            resetPage(){
                this.pagedata.currentPage = 1;
            },
            getSelectData(){
                this.query();
                this.userForSelectModal = false;
            },
            pagechange(pageNum){
                this.pagedata.currentPage = pageNum;
                this.query();
            },
            pageSizeChange(pageSize) {
                this.pagedata.pageSize = pageSize;
                this.query();
            },
            //查
            query() {
                this.userForSelectModal = false;
                this.userInRoleLoading = true;
                let data = {
                    fromPage: this.pagedata.currentPage,
                    pageSize: this.pagedata.pageSize
                }
                data.roleId = this.roleId;
                data.companyName = this.companyName;
                data = Object.assign(data,JSON.parse(JSON.stringify(this.form1)));
                this.$http.get(Api.queryUserInRole, {params : data}).then(res => {
                    res.data.data.map(i=>{
                        if(i.orgInfo != null) {
                            i.orgName = i.orgInfo.orgName;
                        }
                    });
                    this.listData = res.data.data;
                    this.pagedata.total = res.data.total;
                    this.userInRoleLoading = false;
                }).catch(e => {
                    //this.$Message.error('请求失败');
                    this.userInRoleLoading = false;
                })
            },
            reset() {
                this.form1 = {
                    userName: ''
                }
                this.query();
            }
        }
    }
</script>
